<template>
  <Dialog :title="title" :visible="visible" :reveal="reveal" @close="close">
    <!-- 充值 -->
    <el-row type="flex">
      <el-col :span="4">姓名：{{ infoData.name }}</el-col>
      <el-col :span="4">性别：{{ infoData.sex }}</el-col>
      <el-col :span="4">年龄：{{ infoData.age }}</el-col>
      <el-col :span="12">会员号：{{ infoData.code }}</el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="4">当前余额</el-col>
      <el-col :span="20">
        <span>{{ infoData.capital || 0 }}元</span>
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="4">充值金额</el-col>
      <el-col :span="20">
        <el-input v-model="rechargeAmount" style="width:70%" @input="clearNoNum" />
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="4" :offset="4">
        <el-button @click="recharge(1000)">1000元</el-button>
      </el-col>
      <el-col :span="4" :offset="2">
        <el-button @click="recharge(2000)">2000元</el-button>
      </el-col>
      <el-col :span="4" :offset="2">
        <el-button @click="recharge(3000)">3000元</el-button>
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col :span="4" :offset="4">
        <el-button @click="recharge(5000)">5000元</el-button>
      </el-col>
      <el-col :span="4" :offset="2">
        <el-button @click="recharge(10000)">10000元</el-button>
      </el-col>
      <el-col :span="4" :offset="2">
        <el-button @click="recharge(20000)">20000元</el-button>
      </el-col>
    </el-row>
    <el-row>
      <!-- <el-col :offset="18" :span="6">总额：￥{{ rechargeAmount }}</el-col>
      <el-col :offset="18" :span="6">优惠：-￥0.00</el-col> -->
      <el-col :offset="17" :span="7">合计：<span class="span">￥{{ rechargeAmount }}</span></el-col>
    </el-row>
    <el-row>
      <el-col :offset="8" :span="3">
        <el-button v-loading="loading" class="buttons" plain @click="submit">提交</el-button>
      </el-col>
      <el-col :span="3" :offset="2">
        <el-button class="buttons" plain @click="cancel">取消</el-button>
      </el-col>
    </el-row>
    <div class="all-margin-bottom" />
  </Dialog>
</template>
<script>
import Dialog from '@/components/Dialog';
export default {
  components: {
    Dialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    ids: {
      type: [Number, String],
      default: '',
    },
  },
  data() {
    return {
      title: '充值',
      reveal: false,
      loading: false,
      infoData: {},
      option: [],
      rechargeAmount: 1000,
    };
  },
  watch: {
    ids: {
      handler(newId) {
        this.loading = false;
        this.rechargeAmount = 0;
        this.handleCustomers(newId);
      },
    },
  },
  mounted() {
    this.handleCustomers(this.ids);
  },
  methods: {
    clearNoNum() {
      this.rechargeAmount = this.rechargeAmount.replace(/[^\d.]/g, ""); // 清除“数字”和“.”以外的字符
      this.rechargeAmount = this.rechargeAmount.replace(/^\./g, ""); // 验证第一个字符是数字而不是.
      this.rechargeAmount = this.rechargeAmount.replace(/\.{2,}/g, "."); // 只保留第一个. 清除多余的
      this.rechargeAmount = this.rechargeAmount.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      this.rechargeAmount = this.rechargeAmount.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');// 只能输入两个小数
    },
    recharge(money) { // 点击充值金额
      this.rechargeAmount = money;
    },
    async handleCustomers(id) { // 获取顾客信息
      // const res = await this.$api["customer/customers/details"]({ id: '1338385516768399360' });
      const res = await this.$api["customer/customers/details"]({ id });
      if (res.code !== 200) return;
      this.infoData = res.data;
    },
    async submit() { // 提交
      this.loading = true;
      const datas = {};
      datas.customerId = this.infoData.id;
      datas.customerName = this.infoData.name;
      datas.customerPhone = this.infoData.phone;
      datas.customerCode = this.infoData.code;
      datas.amount = this.rechargeAmount;
      const res = await this.$api['customer/customers/recharge'](datas);
      if (res.code !== 200) return this.$message.error('充值失败');
      this.$message.success('充值成功');
      this.loading = false;
      this.$emit("rechargeSuccess");
    },
    cancel() { // 取消
      this.$emit('cancels');
    },
    close() {
      this.$emit('cancels');
    },
  },
};
</script>
<style lang="scss" scoped>
  .span{
    color: #ff6600;
  }
  .el-row{
    line-height: 30px;
  }
  .el-col-4{
    .el-button{
      width: 130px;
      height: 52px;
      border: 1px solid #797979;
      margin: 20px 10px 20px 0;
    }
  }
  .buttons {
    width: 100%;
    height: 40px;
    margin-top: 15px;
  }
  .el-col{
    line-height: 40px;
  }
</style>
